<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" href="font/iconfont.css">
		<style>
			.icon-select:before {
			content:"\eadb";
			font-size: 30px;
			color: gray;
			}
			.icon-select.active:before {
			content: "\ead8";
			color: darkorange;
			}
			img{
				width: 100px;
			}
		</style>
		
	</head>
	<body>
		
		
		<div sty1e="padding: 10px 15px;">
			<span id="zan">0</span>
			<a onclick="dianzan()">点赞</a>
			</div>
		<script>
		function dianzan() {
			var y1 = parseInt( document . getElementById('zan'). innerText);y1=y1+1;
			document. getElementById('zan').innerText=y1;
		}
		</script>

		
		
		
		<a onclick="say('璃茉','18')">璃茉</a>
		<a onclick="say('璃茉茉','17')">璃茉茉</a>
		<a onclick="xiaogou('椒盐啊啊啊','小狗东西')">小宋</a>
		<a onclick="xiaogou('椒盐啊啊啊')">大宋</a>
		<script>
			function say (name,age) {
				alert('我是'+name+'，今年已经'+age+'岁了')
			}
			function xiaogou (name,name2='嘤嘤嘤') {
				alert('我是'+name+'，别人都叫我'+name2)
			}
		</script>
		
		
		
		<!--优化前的计算器-->
		<div sty1e="padding: 10px 15px; border: 1px solid #CCCCCC;">
			<input id="one" value="" />
				+
			<input id="two" value="" />
				<a onclick="calc()">=</a>
			<input id="res" value=""/>
		</div>
		<script>
			//加法
			function add(one, two) {
				var res = one + two;
				return res;
			}
			function calc() {
				var one = parseInt (document.getElementById('one').value);
				var two = parseInt(document.getElementById('two').value);
				var res = add(one,two);
				document.getElementById('res').value = res;
			}
		</script>
		
		<!-- 优化代码后的计算器 -->
		<div sty1e="padding: 10px 15px; border: 1px solid #CCCCCC;">
			<input id="yi" value="" />
			<input id="ys" value=""/>
			<input id="er" value="" />
			<a onclick="calc1()">=</a>
			<input id="jg" value="" />
		</div>
		<script>
				function calc1() {
					var yi = document.getElementById('yi').value;
					var er = document.getElementById('er').value;
					var ys = document.getElementById('ys').value;
					var res = eval(yi + ys + er);
					document.getElementById('jg').value = res;
				}
		</script>
		
		
		<!-- 删除 -->
		<ul>
			<li><img src="img/QQ图片20220614103254.jpg" alt=""><a onclick="removeProd(this)">删除</a></li>
			<li><img src="img/QQ图片20220614103254.jpg" alt=""><a onclick="removeProd(this)">删除</a></li></li>
			<li><img src="img/QQ图片20220614103254.jpg" alt=""><a onclick="removeProd(this)">删除</a></li></li>
		</ul>
		<script>
			function removeProd (element) {
				if (confirm('确定的话真的会删掉的')) {
					var parent = element.parentNode;
					var yeye = parent.parentNode;
					yeye.removeChild(parent);
				}
			}
		</script>
		
		
		<p id="p1">嘿我这里有个超酷的派对</p>
		<p id="p2">你猜我们没有邀请谁？？</p>
		
		
	<script>
		document.getElementById("p2").style.color="blue";
		document.getElementById("p2").style.fontFamily="Arial";
		document.getElementById("p2").style.fontSize="larger";
	</script>
		
		<label><i class="iconfont icon-select" onclick= "changeStyle(this)"></i>好耶</label>
		<script>
			// 判断class是否存在
			function hasClass(elements, cName) {
				return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
			}
			
			// 切换class
			function toggleClass(elements, cName) {
				if (hasClass(elements, cName)) {
					elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), "");
				} else {
					elements.className += " " + cName;
				}
			}	
		
			//改变样式
			function changeStyle(element) {
				toggleClass(element,'active')
			}
	</script>
	</body>
</html>